<template>
    <div class="collection">
        <div class="top">
            <NavTopReturn title="我的收藏" ></NavTopReturn>
        </div>
        <div class="content">
            <div class="bianji" @click="clickShow">{{title}}</div>
            <div class="content-item">
                <div class="item" v-for="(item,index) in CoData" :key="index">
                    <Shouchang :show="showIndex" :pro="item"></Shouchang>
                </div>
            </div>
        </div>

        <div class="footer-item" v-show="showIndex">
        <div class="left">取消</div>
        <div class="right">删除</div>
      </div>
    </div>
</template>

<script>
import Shouchang from "../components/Shouchang.vue"
   import NavTopReturn from "../components/NavTopReturn.vue"
    export default {
        name:"Collection",
        components:{
            NavTopReturn,
            Shouchang
        },
        data() {
            return {
                showIndex:false,
                title:"",

            }
        },
        created() {

            this.title = "编辑"
            //获取本地数据



        },

        computed: {
            CoData(){
                let benData = JSON.parse(localStorage.getItem("appCount"));
                console.log("benDatabenDatabenDatabenData=",benData);
              let aaa =   benData.filter(itme=>{
                    return itme.ischebox == true
                })

                return aaa

            }
        },

        methods:{
            clickShow(){
                this.showIndex = !this.showIndex
                console.log("this.title=>",this.title); 

            
                if(this.showIndex == true){
                    this.title = "完成"
                }else{
                    this.title = "编辑"
                }
            },

        }

        
    }
</script>

<style lang="scss" scoped>
.content-item{
    width: 96%;
    margin: 10px auto;
    border-radius: 15px;
    border: 1px solid rgb(235, 233, 233);
    margin-top: 10px;

}
.collection{
    background-color: #f6f6f7;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.footer-item{
    position: fixed;
    bottom: 0;
    display: flex;
    height: 50px;
    justify-content: center;
    width: 100%;
    background-color: #f6f6f7;

    .left{
        width: 50%;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
        border-right: 1px solid rgb(215, 215, 215);

    }
    .right{
        width: 50%;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
    }
}
.bianji{
    font-size: 16px;
    text-align: right;
    border-bottom: 1px  solid #999;
    padding: 10px;
    margin-bottom: 5px;
}

</style>